<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐在自学</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/learningRoute.css}">
    <link rel="stylesheet" th:href="@{/css/topbar.css}">
    <script th:src="@{/layui/layui.js}"></script>

</head>

<body>
<!-- 头部引入 -->
<div th:insert="~{_topbar :: topbar}" id="topbar"></div>
<div class="nav-container">
    <!-- 头部图片 -->
    <div class="layui-row top-images">
        <img src="../images/notebook.png" alt="">
    </div>
    <div style="height: 10px;clear: both;"></div>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-body">
                    <!-- 第一行 -->
                    <div class="layui-row">
                        <div class="layui-col-xs1">
                            <span>相关:</span>
                        </div>

                        <div class="layui-col-xs11">
                                <span>
                                    <button type="button"
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary btn-background">
                                        所有
                                    </button>
                                    <button type="button"
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">
                                        计算机相关
                                    </button>
                                </span>
                        </div>
                    </div>
                    <br/>
                    <!-- 第二行 -->
                    <div class="layui-row">
                        <div class="layui-col-xs1">
                            <span>学习方向:</span>
                        </div>

                        <div class="layui-col-xs11">
                                <span>
                                    <button type="button"
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary btn-background">
                                        所有
                                    </button>
                                    <button type="button"
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">
                                        前端
                                    </button>
                                    <button type="button"
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">
                                        后端
                                    </button>
                                    <button type="button"
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">
                                        移动端
                                    </button>
                                </span>
                        </div>
                    </div>
                </div>
                <hr class="layui-bg-blue">
                <div style="height: 10px;"></div>
                <div class="layui-card-header">
                    <div class="layui-row">
                        <div class="layui-col-xs2">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">
                                综合
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm">
                                最新
                            </button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius  layui-btn-danger">
                                最热
                            </button>
                        </div>

                        <div class="layui-col-xs1 layui-col-xs-offset9">
                            <!-- 课程不够隐藏，课程超出了预定高度，显示 -->
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">
                                <i class="layui-icon layui-icon-down"></i> 更多
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div style="height: 20px;clear: both;"></div>
        <div class="layui-row">
            <div class="layui-fluid layadmin-maillist-fluid">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                    <div class="layui-col-md3 layui-col-sm6">
                        <a href="#" class="learn-path-item">
                            <img src="https://dn-simplecloud.shiyanlou.com/1487741005890.png">
                            <div class="learn-path-name">
                                新手入门
                            </div>
                            <div class="learn-path-courses">
                                11门课程
                                <span>
                                        <i class="layui-icon layui-icon-rate"></i>
                                    <!-- 点击次数 -->
                                        433
                                    </span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- </div>有没有必要加分页</div> -->
    </div>
</div>
<!-- 尾部引入 -->
<div th:insert="~{_endbar :: endbar}" id="endbar"></div>
</body>
<script>
    layui.use("jquery", function () {
        var $ = layui.$;

        //搜索按钮
        $("#search-i").on('click',function(){
            var keyword = $("#search-input").val();
            window.location.href = "http://search.lyfx.com/all-class?keyword=" + keyword;
        })
    })
</script>

</html>